<template>
  <div class="bill" >
    <el-row>
      <el-col><h3>余额账单</h3></el-col>
    </el-row>
    <el-row  style="margin: 15px 0">
      <el-col :xs="24" :sm="10" :md="8" :lg="6">
        <el-input
            placeholder="搜索"
            prefix-icon="el-icon-search"
            clearable
            @input="searchGo"
            v-model="search">
        </el-input>
      </el-col>
      <div class="fill hidden-sm-and-up"></div>
      <el-col :xs="24" :sm="13" :md="10" :lg="7" style="display: flex;align-items: center">
        <span style="margin-left: 40px;white-space: nowrap" class="hidden-xs-only">类型：</span>
        <el-select v-model="orderBy">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-table
        class="hidden-xs-only"
        v-loading="table_loading"
        fit
        :data="bills"
        style="width: 100%"
        highlight-current-row>
      <el-table-column
          prop="time"
          label="时间"
          min-width="140px"
      >
      </el-table-column>
      <el-table-column
          prop="info"
          label="备注"
          min-width="170px"
      >
      </el-table-column>
      <el-table-column
          prop="surplus_change"
          label="费用"
          min-width="80px"
      >
      </el-table-column>
      <el-table-column
          prop="surplus"
          label="剩余"
          min-width="80px"
      >
      </el-table-column>
      <el-table-column
          label="类型"
          min-width="70px"
      >
        <template slot-scope="scope">
          <el-tag color="#FFF4DE" type="info" v-if="scope.row.surplus_change<0">流出</el-tag>
          <el-tag color="#C9F7F5" type="success" v-else>流入</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="hidden-xs-only"
        style="margin: 12px 0px;float: right"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5,10,15,20,30,40,50]"
        :page-size="pages"
        layout="total, sizes, prev, pager, next, jumper"
        :total="all"
    >
    </el-pagination>

    <el-table
        ref="mytable"
        v-loading="table_loading"
        fit
        :data="bills"
        style="width: 100%"
        @row-click="row_click_event"
        class="m_table hidden-sm-and-up"
        highlight-current-row>
      <el-table-column type="expand" width="20px">
        <template slot-scope="props">
          <div class="content">
            <div class="item">
              <div class="l">备注：</div>
              <div class="r">
                <span>{{ props.row.info }}</span>
              </div>
            </div>
            <div class="item">
              <div class="l">类型：</div>
              <div class="r">
                <el-tag color="#FFF4DE" type="info" v-if="props.row.surplus_change<0">流出</el-tag>
                <el-tag color="#C9F7F5" type="success" v-else>流入</el-tag>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
          prop="time"
          label="时间"
          min-width="150px"
      >
      </el-table-column>
      <el-table-column
          prop="surplus_change"
          label="费用"
          min-width="70px"
      >
      </el-table-column>
      <el-table-column
          prop="surplus"
          label="剩余"
          min-width="70px"
      >
      </el-table-column>
    </el-table>
    <el-pagination
        class="hidden-sm-and-up m_page"
        style="margin: 12px 0px;float: right"
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pages"
        layout="prev, pager, next"
        :total="all"
    >
    </el-pagination>

  </div>
</template>

<script>
import {getUserBill} from "../../utils/api";
import utils from "@/utils/time"
import qs from "qs";

export default {
  name: "UserBill",
  data(){
    return {
      page:1,
      pages:10,
      all:0,
      bills:[],
      search:'',
      axiosTime:'',
      orderBy:"1",
      table_loading:true,
      options:[
        {value:'1',label:'全部'},
        {value:'2',label:'流出'},
        {value:'3',label:'流入'},
      ]
    }
  },
  created() {
    this.getBills(this.page,this.pages,this.orderBy,this.search || undefined,this.$route.query?.userid)
  },
  methods:{
    searchGo(v){
      if(this.axiosTime!=null){
        clearTimeout(this.axiosTime)
      }
      this.axiosTime = setTimeout(()=>{
        if(this.page==1){
          this.getBills(this.page,this.pages,this.orderBy,v  || undefined,this.$route.query?.userid)
        }else{
          this.page = 1
        }
      },1000)
    },
    handleSizeChange(size){
      this.pages = size;
      // console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange(currentPage){
      this.page = currentPage;
      // console.log(this.currentPage); //点击第几页
    },
    getBills(page,pages,type,like,uid){
      this.table_loading = true
      getUserBill(qs.stringify({page,pages,type,like,uid})).then(res=>{
        this.all = res.all
        this.bills = res.body
        this.bills.forEach(v=>{
          v.time = utils.timestampToTime(v.time,5)
        })
        this.table_loading = false
      }).catch(err=>{
        console.log(err)
      })
    },
    row_click_event(row){
      this.$refs.mytable.toggleRowExpansion(row)
    }
  },
  watch:{
    page(){
      if(this.axiosTime!=null){
        clearTimeout(this.axiosTime)
      }
      this.axiosTime = setTimeout(()=>{
        this.getBills(this.page,this.pages,this.orderBy,this.search  || undefined,this.$route.query?.userid)
      },0)
    },
    pages(){
      if(this.axiosTime!=null){
        clearTimeout(this.axiosTime)
      }
      this.axiosTime = setTimeout(()=>{
        this.getBills(this.page,this.pages,this.orderBy,this.search || undefined,this.$route.query?.userid)
      },0)
    },
    orderBy(){
      if(this.page==1){
        this.getBills(this.page,this.pages,this.orderBy,this.search || undefined,this.$route.query?.userid)
      }else{
        this.page = 1
      }
    }
  }
}
</script>

<style scoped>
.el-tag{
  border: none;
  height: 24px;
  line-height: 24px;
}
.el-tag--success{
  color: #1BC5BD;
}
.el-tag--info{
  color: #FFA800;
}
.el-table /deep/ .cell{
  padding-right: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}
.el-select{
  width: 100%;
}
.fill{
  width: 100%;
  height: 10px;
  float: left;
}
/deep/ .m_table .el-table__row td:first-child .cell{
  padding-left: 0;
  width: 30px;
}
.content{
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.content .item{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.m_page{
  display: flex;
  align-items: center;
  justify-content: center;
  float: none!important;
  /*flex-direction: column;
  margin: 0 auto!important;
  align-items: center;
  */
}
.m_page /deep/ .el-pagination__total{
  flex: 1;
}
.m_page /deep/ .el-pagination__sizes{
  flex: 1;
}
/deep/ .el-loading-mask{
  z-index: 1888;
}
</style>
